import React, { Component } from 'react';
import { connect } from 'react-redux'
import actions from '../../../store/actions'
import { getList } from '../../../api'
import ListItem from '../../../components/ListItem'
class Index extends Component {
  componentDidMount(){
    this.getListAndSet()
  }
  async getListAndSet() {
    const { dispatch } = this.props
    // 获取数据
    const resp = await getList()
    // 获取 action => { type: , payload, }
    const action = actions.getList(resp.data.data)
    // 分发 action
    dispatch(action)
  }
  render() {
    const { list } = this.props
    return (
      <div>
        {
          list.length > 0 && list.map((v, i) => {
            return <ListItem key={i} v={v} { ...this.props }></ListItem>
          })
        }
      </div>
    );
  }
}

const mapState = state => {
  return { ...state }
}

const mapDiapatch = dispatch => {
  return { dispatch }
}

export default connect(mapState, mapDiapatch)(Index);










// function conect(state) {
//   return function Hoc(WrppaerComponent) {
//     return class Fn extends Component {
//       state = {
//         count: 1
//       }
//       handleClick = () => {
//         this.setState({
//           count: this.state.count + 1
//         })
//       }
//       render() {
//         return <WrppaerComponent {...this.props} {...this.state} handleClick={this.handleClick} {...state}></WrppaerComponent>
//       }
//     }
//   }
// }


// class Comp extends Component {
//   render() {
//     const { count, handleClick, a } = this.props
//     return (
//       <div>
//         <h1>{count}</h1>
//         <button onClick={handleClick}>+1</button>
//         <h2>{a}</h2>
//       </div>
//     )
//   }
// }

// export default conect({ a: 2222 })(Comp)
